<template>
	<view>
		<u-navbar :is-back="false" :title="navbar.title" :background="navbar.background">
			<view class="navbar-right" slot="right" >
				<view class="dot-box right-item">
					<u-icon name="search" size="38"  @click="search.show = true"></u-icon>
				</view>
			</view>	
		</u-navbar>
		<view class="content">
			<view class="u-page">
				<view class="wrap">
					<view class="list-wrap">
						<u-cell-group title-bg-color="rgb(243, 244, 246)">
							<u-cell-item :titleStyle="{fontWeight: 500}"  @click="detail(item)" :title="item.processVariables.title"
							 v-for="(item, index) in todoList" :key="index">
								<u-tag :text="item.taskName" :type="item.processVariables.isBack ? 'error' : 'success'" />
							</u-cell-item>
						</u-cell-group>
					</view>
					<u-loadmore @loadmore="loadData" :status="status" :load-text="loadText" />
				</view>
			</view>
		</view>
		<footerBar ></footerBar>
		<!-- 点击搜索弹窗 -->
		<u-popup border-radius="10" v-model="search.show"
			 :mode="search.mode" 
			length="70%" :mask="search.mask"
			:closeable="search.closeable"
			:close-icon-pos="search.closeIconPos"
		>
			<view style="">
				
				<u-card margin="70rpx 18rpx" box-shadow="1px 5px 12px 0px;" :title="$t('system.searchCondition')" >
					<view class="" slot="body">
						<u-form  >
							<u-form-item >
								<u-input :placeholder="search.flowname" v-model="searchForm.projectName" />
							</u-form-item>
							<u-form-item >
								<u-input :placeholder="search.title" v-model="searchForm.title" />
							</u-form-item>
						</u-form>
					</view>
				</u-card>
				<u-row gutter="16" style="    width: 86%;margin: 0 auto;">
					<u-col span="6">
						<u-button size="medium" @click="searchReset">{{$t('system.reset')}}</u-button>
					</u-col>
					<u-col span="6">
						<u-button size="medium" type="error" @click="searchConfirm">{{$t('system.confirm')}}</u-button>
					</u-col>
				</u-row>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getToken } from '../../utils/auth'
	import request from "../../utils/request.js"
	export default {
		data() {
			return {
				//待办标题
				todoTitle: this.$t('system.todoTitle'),
				status:"loadmore",
				loadText: {
					loadmore: this.$t('system.loadBefore'),
					loading: this.$t('system.loadBefore'),
					nomore: this.$t('system.nomore'),
				},
				// 待办事项列表
				todoList: [],
				// 分页相关数据
				page: {
					currentPage: 0,
					pageSize: 20,
					total: 0,
				},
				// 查询条件
				queryParams:{
					
				},
				// 搜索相关信息
				search:{
					show: false,
					closeable: true,
					mode: "right",
					closeIconPos: 'top-right',
					flowname: this.$t('system.flowname'),
					title: this.$t('system.title'),
				},
				searchForm: {
					projectName: "",
					title: ""
				},
				navbar:{
					title: this.$t('system.todoTitle'),
					background: {
						backgroundColor: '#001f3f',
						backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					}
				}
			}
		},
		onLoad() {
			this.$onLaunched;
			this.getTodoList ()
		},
		methods: {
			// 查看详情
			detail(taskInfo){
				debugger
				let customPage = "/pages/flowable/task/custom/" + taskInfo.processDefinitionKey + '/' + taskInfo.taskFormKey  + "?taskInfo=" + JSON.stringify(taskInfo)
				// 找不到指定頁面則跳轉到通用審批頁面
				if(taskInfo.taskFormKey){
					let _this = this;
					uni.navigateTo({
					    url: customPage,
						fail: function(a,b,c){
							_this.$u.route({
								url: "/pages/flowable/task/common/task-complete?taskInfo=" + JSON.stringify(taskInfo)
							}).then(function(a,b,c){
								console.log(1)
							})
						}
					});
				}else{
					this.$u.route({
						url: "/pages/flowable/task/common/task-complete?taskInfo=" + JSON.stringify(taskInfo)
					}).then(function(a,b,c){
						console.log(1)
					})
				}
				
			},
			loadData(){
				this.getTodoList();
			},
			getTodoList () {
				let _this = this;
				this.queryParams = {
					processParamStr: JSON.stringify(this.searchForm),
					pageNo: this.page.currentPage + 1,
					pageSize: this.page.pageSize
				}
				request({
					url: '/flowable/workflow/queryTodo',
					method: 'post',
					data: this.queryParams
				}).then(response => {
					if(_this.page.currentPage + 1 == response.data.pageNum){
						_this.todoList = [..._this.todoList,...response.data.list]
					}
					_this.page.total = response.data.total
					_this.page.currentPage = response.data.pageNum
				})
			},
			searchConfirm(){
				this.search.show = false;
				this.todoList = [];
				this.getTodoList();
			},
			searchReset() {
				this.searchForm =  {
					projectName: "",
					title: ""
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
</style>
